body, html {
    height: 100%;
    margin: 0;
    padding: 0;
/*    margin-top: 20px;*/
}
/*main {
    padding-top: 35px; /* 这个值需要根据您的header高度和期望的间距进行调整 */
}*/
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    padding: 25px;
    background-color: #ffffff; /* 或其他背景色，与正文区分 */
    z-index: 100; /* 确保按钮在最上层 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选，添加阴影效果 */
}

.container {
    display: grid; /* 改为网格布局 */
    grid-template-columns: 15% 65% 25%; /* 第一列25%，第二列50% */
    grid-auto-rows: minmax(0, 1fr); /* 自动行高，保证内容区域填满可用空间 */
    height: 100%;
}

.content-area {
    flex-grow: 1;
    padding-left: 20px;
    overflow-y: auto;
    width: 100%;
    margin: auto;
}

.table-of-contents {
    width: 100%;
    background-color: #f8f9fa;
    overflow-y: auto;
    text-decoration: none; /* 移除链接的下划线 */
    list-style-type: none; /* 移除列表项前的默认标记 */
    padding: 0; /* 清除列表内边距 */
}

.table-of-contents ul {
    list-style-type: none; /* 确保子列表也没有标记 */
    text-decoration: none; /* 移除链接的下划线 */
    padding-left: 20px; /* 添加缩进以区分层级 */
}

.table-of-contents ul ul {
    display: none; /* 默认隐藏子目录 */
}

.table-of-contents li.open > ul {
    display: block; /* 当父项被打开时，显示子目录 */
}

/* 可选样式，用于美化 */
.table-of-contents li {
    cursor: pointer;
}

.table-of-contents li:hover {
    background-color: #f0f0f0; /* 鼠标悬停时改变背景色 */
}


.file-list {
    width: 100%;
    background-color: #f8f9fa;
    overflow-y: auto;

    /* 补充样式 */
    text-decoration: none; /* 移除链接的下划线 */
    list-style-type: none; /* 移除列表项前的默认标记 */
    padding: 0; /* 清除列表内边距 */
}
.file-list li {
    list-style-type: none; /* 确保子列表没有标记 */
    text-decoration: none; /* 移除链接的下划线 */
    cursor: pointer; /* 鼠标悬停时指针变为手型，提升用户体验 */
    margin-bottom: 10px; /* 为列表项之间添加一些间距 */
}















